<template>
  <div id="app" style="margin-bottom: 200px;">
    <h3>任务池配置</h3>
    
    <el-table :data="list.score_list" style="margin: auto; width: 100%"
        border fit highlight-current-row row-key="idx" v-loading="listLoading">
    
        <el-table-column label="任务id" width="100" align="center">
            <template slot-scope="scope">
                {{ scope.row.task_id }}
            </template>
        </el-table-column>

        <el-table-column label="得分类型" width="400" align="center">
            <template slot-scope="scope">
                <el-select style="width: 350px" v-model.number="scope.row.task_pool_id" filterable>
                    <el-option v-for="item in task_pool" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </template>
        </el-table-column>

        <el-table-column label="目标值" width="200" align="center">
            <template slot-scope="scope">
                <el-input v-model.number="scope.row.target"></el-input>
            </template>
        </el-table-column>

        <el-table-column label="分数" width="200" align="center">
            <template slot-scope="scope">
                <el-input v-model.number="scope.row.score"></el-input>
            </template>
        </el-table-column>

        <el-table-column label="活动pid" align="center">
            <template slot-scope="scope">
                <el-input v-model="scope.row.used_pid" disabled></el-input>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
                <el-button type="warning" size="mini" @click="cloneItem(scope.row)">克隆</el-button>
                <el-button type="danger" size="mini" @click="deleteItem(scope.row, scope.$index)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

    <div class="button-setting" style="margin-top: 30px">
        <el-button type="primary" @click="addItem">新 增</el-button>
        <el-button style="margin-left: 30px" type="success" @click="updateItem">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { fetchList } from '@/api/index'
export default {
data() {
    return {
    listQuery: {
        'action': 'extreme_user_event_project',
        'project': -1,
        'type': 'score_type',
        'task_id': null,
        'data': null
    },
    listLoading: true,
    list: {
        'score_list': [],
    },
    task_pool: [],
    max_idx: 0,
    rules: {}
    }
},
created() {
    this.getList()
},
methods: {
    async getList() {
        this.listLoading = true;
        this.listQuery.type = 'score_type';
        await fetchList(this.listQuery)
        .then(response => {
            this.list.score_list = response.data;
            this.max_idx = this.list.score_list.length;
            this.task_pool = response.task_pool
            this.listLoading = false
        })
    },
    updateItem() {
        let permit_submit = this.checkData();
        if (!permit_submit) {
            return false
        }
        this.listQuery.type = 'update_score_type';
        this.listQuery.data = this.list.score_list;
        this.listLoading = true;
        fetchList(this.listQuery).then(response => {
            if (response.code === 200) {
                this.getList()
                this.$notify({
                    title: 'Success',
                    message: response.msg,
                    type: 'success',
                    duration: 2000
                })
            } else {
                this.$notify.error({
                    title: '错误',
                    message: response.msg
                });
            }
        })
        return false;
    },
    checkData() {
        let check_data = this.list.score_list;
        for (let node of check_data) {
            let name = node.task_id !== -1 ? node.task_id : `[新增任务]`;
            if (node.task_pool_id == undefined || node.task_pool_id === '') {
                this.$message({'type': 'warning', 'message': `任务ID${name}的得分类型未选择`});
                return false
            } else if (node.target == undefined || node.target === '') {
                this.$message({'type': 'warning', 'message': `任务ID${name}的目标值未选择`});
                return false
            } else if (node.score == undefined || node.score === '') {
                this.$message({'type': 'warning', 'message': `任务ID${name}的分数未选择`});
                return false
            } else if (node.target <= 0) {
                this.$message({'type': 'warning', 'message': `任务ID${name}的目标值必须为正数`});
                return false
            } else if (node.score <= 0) {
                this.$message({'type': 'warning', 'message': `任务ID${name}的分数必须为正数`});
                return false
            }
        }
        return true
    },
    addItem() {
        this.list.score_list.push({
            'task_id': -1,
            'idx': this.max_idx + 1,
            'used_pid': ''
        });
        this.max_idx += 1;
    },
    cloneItem(item) {
        let new_item = JSON.parse(JSON.stringify(item));
        new_item.task_id = -1,
        new_item.idx = this.max_idx + 1;
        this.max_idx += 1;
        new_item.used_pid = ''
        this.list.score_list.push(new_item)
    },
    deleteItem(item, index) {
        this.$confirm('确定删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        .then(() => {
            if (item.task_id === -1) {
                this.list.score_list.splice(index, 1)
            } else {
                this.listQuery.type = 'delete_score_type';
                this.listQuery.task_id = item.task_id;
                fetchList(this.listQuery)
                .then((res) => {
                    this.getList()
                })
            }
        })
        .catch(() => {
          this.$message({'type': 'info', 'message': '已取消删除'});
        })
    }
}
}
</script>

<style scoped>
  #app {
    margin: 0 auto;
    width: 80%;
    height: 750px;
  }
</style>
